<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图集浏览插件相册看图插件|16css.com</title>
<meta name="keywords" content="jquery图集浏览插件,jquery看图插件,jquery相册插件" />
<meta name="description" content="这是一个类似腾讯的jquery看图插件。这两个div是热区，用来切换上一张和下一张，所以背景是空白的。但是IE下热区消失了，无法点击。解决办法：给块区域加个背景，这个背景为一个像素的blank.gif 空白图标。这样就让热区复活。" />
<style type="text/css">
h1 {margin:0; padding:0; font-size:18px}
#dtit {width:auto; height:30px; line-height:30px; text-align:center; background-color:#eee; border-bottom:solid 1px #ccc; border-top:solid 1px #ccc; font-size:14px}
#dtit a,
.dtit2 a {color:#f00}
.dtit2 {height:30px; line-height:30px; text-align:center}
body{font-size:12px;font-family: '微软雅黑';}
.miapShuListBox h3{font-size:14px; padding:0px; margin:0px; line-height:25px; color:#444;}
.miapShuListBox .dcon {color:#666; line-height:200%; margin-bottom:30px; background:#f8f8f8; padding:10px; border:1px solid #d5d5d5;font-family: Arial, '微软雅黑';}
</style>
<!--JS代码开始16css.cn-->
<script src="style/jquery-1.4.min.js" type="text/javascript"></script>
<link href="style/css.css" rel="stylesheet" type="text/css" />
<!--JS代码结束16css.cn-->
</head>

<body>
<div style="width:auto; height:40px; line-height:40px; text-align:center"><h1 style="margin:0; padding:0; font-size:18px"><a href="http://www.16css.com/photo/100.html" target="_blank">jquery图集浏览插件相册看图插件</a></h1></div>


<div style="height:auto; overflow:hidden; width:1000px; margin:0 auto; padding:30px; background:#eee; border:1px solid #ddd;">
  <div class="miapShuListBox">
    <h3>效果演示：</h3>
		<div class="dcon">
<!--代码开始16css.com-->        
<!--滚动看图-->
	<div id="picSlideWrap" class="clearfix">
        <h3 class="titleh3">高清：我国多省遭50年来罕见旱情</h3>
        <h4 class="titleh4">发布时间：2011-05-30 04:43:00  |  <a href="http://www.16css.com" target="_blank">进入一流资源网</a>　来源:一流资源网</h4>
    
        <div class="imgnav" id="imgnav"> 
    
             <div id="img"> 
                <img src="images/100260_1306276811398.jpg" width="780" height="570"/>
                <img src="images/100261_1306276853791.jpg"  width="780" height="570"/>
                <img src="images/100391_4381_1306217104406.jpg" width="780" height="570" />
                <img src="images/bImg.jpg"  width="780" height="570" />
                <img src="images/100260_1306276811398.jpg" width="780" height="570"/>
                <img src="images/100261_1306276853791.jpg"  width="780" height="570"/>
                <img src="images/100391_4381_1306217104406.jpg" width="780" height="570" />
                <img src="images/bImg.jpg"  width="780" height="570" />
                <img src="images/100260_1306276811398.jpg" width="780" height="570"/>
                <img src="images/100261_1306276853791.jpg"  width="780" height="570"/>
                <div id="front" title="上一张"><a href="javaScript:void(0)" class="pngFix"></a></div>
                <div id="next" title="下一张"><a href="javaScript:void(0)" class="pngFix"></a></div>
             </div>
             
             <div id="content">
    　　         <p>今年以来，湘鄂两地降雨、来水偏少，蓄水不足，出现严重的旱情。在流经湖北石首市、湖南华容县等地的华容河流域1679平方公里范围内，30万群众生产生活用水出现困难。从5月4日开始，湖南华容县和湖北石首市一起“引江济河”，在位于石首市调关镇的华容河与长江交汇处筑堤铺管，通过管道将长江水引进久旱少水的华容河.新华社记者 李尕 摄 </p>
                <p align="right">2011年05月21日08:38新华网</p>
             </div>
              
             <div id="cbtn">
                <i class="picSildeLeft"><img src="images/ico/picSlideLeft.gif"/></i> 
                <i class="picSildeRight"><img src="images/ico/picSlideRight.gif"/></i> 
                <div id="cSlideUl">
                    <ul>
                        <li><img src="images/100260_1306276811398.jpg"/><tt></tt></li>
                        <li><img src="images/100261_1306276853791.jpg"/><tt></tt></li>
                        <li><img src="images/100391_4381_1306217104406.jpg" /><tt></tt></li>
                        <li><img src="images/bImg.jpg"/><tt></tt></li>
                        <li><img src="images/100260_1306276811398.jpg"/><tt></tt></li>
                        <li><img src="images/100261_1306276853791.jpg"/><tt></tt></li>
                        <li><img src="images/100391_4381_1306217104406.jpg" /><tt></tt></li>
                        <li><img src="images/bImg.jpg"/><tt></tt></li>
                        <li><img src="images/100260_1306276811398.jpg"/><tt></tt></li>
                        <li><img src="images/100261_1306276853791.jpg"/><tt></tt></li>
                    </ul>
                </div>
             </div>         
            
        </div>
    
    </div><!--end滚动看图-->
    <script>
$(document).ready(function(){                          
    var index=0;
    var length=$("#img img").length;
    var i=1;
    
    //关键函数：通过控制i ，来显示图片
    function showImg(i){
        $("#img img")
            .eq(i).stop(true,true).fadeIn(800)
            .siblings("img").hide();
         $("#cbtn li")
            .eq(i).addClass("hov")
            .siblings().removeClass("hov");
    }
    
    function slideNext(){
        if(index >= 0 && index < length-1) {
             ++index;
             showImg(index);
        }else{
			if(confirm("已经是最后一张,点击确定重新浏览！")){
				showImg(0);
				index=0;
				aniPx=(length-5)*142+'px'; //所有图片数 - 可见图片数 * 每张的距离 = 最后一张滚动到第一张的距离
				$("#cSlideUl ul").animate({ "left": "+="+aniPx },200);
				i=1;
			}
            return false;
        }
        if(i<0 || i>length-5) {return false;}						  
               $("#cSlideUl ul").animate({ "left": "-=142px" },200)
               i++;
    }
     
    function slideFront(){
       if(index >= 1 ) {
             --index;
             showImg(index);
        }
        if(i<2 || i>length+5) {return false;}
               $("#cSlideUl ul").animate({ "left": "+=142px" },200)
               i--;
    }	
        $("#img img").eq(0).show();
        $("#cbtn li").eq(0).addClass("hov");
        $("#cbtn tt").each(function(e){
            var str=(e+1)+"/"+length;
            $(this).html(str)
        })
    
        $(".picSildeRight,#next").click(function(){
               slideNext();
           })
        $(".picSildeLeft,#front").click(function(){
               slideFront();
           })
        $("#cbtn li").click(function(){
            index  =  $("#cbtn li").index(this);
            showImg(index);
        });	
		$("#next,#front").hover(function(){
			$(this).children("a").fadeIn();
		},function(){
			$(this).children("a").fadeOut();
		})
    })	
</script>
<!--代码结束16css.com-->             
		</div>
	</div>
	
	<div class="miapShuListBox">
		<h3>使用说明：</h3>
		<div class="dcon"> 需要注意的是：<br />
		  &lt;div id=&rdquo;front&rdquo; title=&rdquo;上一张&rdquo;&gt;&lt;a href=&rdquo;javaScript:void(0)&rdquo; class=&rdquo;pngFix&rdquo;&gt;&lt;/a&gt;&lt;/div&gt;<br />
		  &lt;div id=&rdquo;next&rdquo; title=&rdquo;下一张&rdquo;&gt;&lt;a href=&rdquo;javaScript:void(0)&rdquo; class=&rdquo;pngFix&rdquo;&gt;&lt;/a&gt;&lt;/div&gt;<br />
		  这两个div是热区，用来切换上一张和下一张，所以背景是空白的。<br />
		  但是IE下热区消失了，无法点击。<br />
	    解决办法：给块区域加个背景，这个背景为一个像素的blank.gif 空白图标。这样就让热区复活。 </div>
	</div>
	
	<div class="miapShuListBox">
		<h3>下载地址：</h3>
		<div class="dcon">请返回文章页下载</div>
	</div>
</div>
<div class="ad" style="width:980px; height:auto; overflow:hidden; margin:0 auto; margin-top:10px"><script src=http://www.16css.com/d/js/acmsd/thea9.js></script></div>
<div id="dtit" style=" margin-top:10px">更多网页资源及CMS技巧请访问 <a href="http://www.16css.com" target="_blank">一流资源网(www.16css.com)</a></div>
<script src=/d/js/acmsd/thea8.js></script>
</body>
</html>